<template>
    <div>
        <el-card style="margin:20px 0">
            <el-form :inline="true" class="demo-form-inline" :model="cFrom">
                <el-form-item label="商品大类名称">
                    <el-select placeholder="请选择" v-model="cFrom.category1Id" @change="handleChange">
                        <el-option label="c.categoryName" value="c.categoryId" v-for="(c, index) in bigcategoryList"
                            :key="c.categoryId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card>
            <el-table style="width: 100%" border :data="list">
                <el-table-column type="index" label="序号" width="80px" align="center">
                </el-table-column>
                <el-table-column prop="prop" label="产品名字" width="width">
                </el-table-column>
                <el-table-column prop="prop" label="商品原价" width="width">
                </el-table-column>
                <el-table-column prop="prop" label="商品现价" width="width">
                </el-table-column>
                <el-table-column prop="prop" label="商品库存" width="width">
                </el-table-column>
                <el-table-column prop="prop" label="产品图片" width="width">
                    <template slot-scope="{row,$index}">
                        <!-- row 作用插槽的数组回传 返回的是 data 数据  $index 数组索引-->
                        <!-- logoUrl 后端接口文档的数据 -->
                        <img :src="row.logoUrl" alt="" style="width: 100px;height: 100px;" />
                    </template>
                </el-table-column>
                <el-table-column prop="prop" label="状态" width="width">
                </el-table-column>
                <el-table-column prop="prop" label="操作" width="width">
                    <template slot-scope="{row,$index}">
                        <el-button type="warning" icon="el-icon-edit" size="mini"
                            @click="updateTradeMark(row)">修改</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini"
                            @click="deleteTradeMark(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'small-category',
    data() {
        return {
            // 代表分页器第几页
            current: 1,
            // 当前页数展示数据条数
            size: 3,
            // 总共数据条数
            total: 0,
            // 商品大类名称
            bigcategoryList: [],
            // 收集一级分类ID
            cFrom: {
                category1Id: ''
            }
        }
    },
    mounted() {
        this.getBigCateList();
    },
    methods: {
        async getBigCateList(pager = 1) {
            this.current = pager;
            const { current, size } = this;
            let result = await this.$API.category.reqCategory({ current: current, size: size });
            if (result.code == 0) {
                this.bigcategoryList = result.data;
                this.total = result.data.total;
            }
        },
        async handleChange() {
            const { category1Id } = this.cFrom;
            let result = await this.$API.category.reqSmallCategoryList(category1Id);
            if (result.code == 0) {

            }
        }
    }
}

</script>

<style lang="scss" scoped></style>